<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p>The <code>&lt;md-card&gt;</code> directive is a container element used within <code>&lt;md-content&gt;</code> containers.</p>
<p>An image included as a direct descendant will fill the card&#39;s width, while the <code>&lt;md-card-content&gt;</code>
container will wrap text content and provide padding. An <code>&lt;md-card-footer&gt;</code> element can be
optionally included to put content flush against the bottom edge of the card.</p>
<p>Action buttons can be included in an <code>&lt;md-card-actions&gt;</code> element, similar to <code>&lt;md-dialog-actions&gt;</code>.
You can then position buttons using layout attributes.</p>
<p>Card is built with:</p>
<ul>
<li><code>&lt;md-card-header&gt;</code> - Header for the card, holds avatar, text and squared image<ul>
<li><code>&lt;md-card-avatar&gt;</code> - Card avatar<ul>
<li><code>md-user-avatar</code> - Class for user image</li>
<li><code>&lt;md-icon&gt;</code></li>
</ul>
</li>
<li><code>&lt;md-card-header-text&gt;</code> - Contains elements for the card description<ul>
<li><code>md-title</code> - Class for the card title</li>
<li><code>md-subhead</code> - Class for the card sub header</li>
</ul>
</li>
</ul>
</li>
<li><code>&lt;img&gt;</code> - Image for the card</li>
<li><code>&lt;md-card-title&gt;</code> - Card content title<ul>
<li><code>&lt;md-card-title-text&gt;</code><ul>
<li><code>md-headline</code> - Class for the card content title</li>
<li><code>md-subhead</code> - Class for the card content sub header</li>
</ul>
</li>
<li><code>&lt;md-card-title-media&gt;</code> - Squared image within the title<ul>
<li><code>md-media-sm</code> - Class for small image</li>
<li><code>md-media-md</code> - Class for medium image</li>
<li><code>md-media-lg</code> - Class for large image</li>
</ul>
</li>
</ul>
</li>
<li><code>&lt;md-card-content&gt;</code> - Card content<ul>
<li><code>md-media-xl</code> - Class for extra large image</li>
</ul>
</li>
<li><code>&lt;md-card-actions&gt;</code> - Card actions<ul>
<li><code>&lt;md-card-icon-actions&gt;</code> - Icon actions</li>
</ul>
</li>
</ul>
<p>Cards have constant width and variable heights; where the maximum height is limited to what can
fit within a single view on a platform, but it can temporarily expand as needed.</p>

</div>


<div>
  

  

  
  <section class="api-section">
    <h2 id="Usage">Usage</h2>
  
    <h3 id="card-with-optional-footer">Card with optional footer</h3>
<hljs lang="html">
<md-card>
 <img src="card-image.png" class="md-card-image" alt="image caption">
 <md-card-content>
   <h2>Card headline</h2>
   <p>Card content</p>
 </md-card-content>
 <md-card-footer>
   Card footer
 </md-card-footer>
</md-card>
</hljs>

<h3 id="card-with-actions">Card with actions</h3>
<hljs lang="html">
<md-card>
 <img src="card-image.png" class="md-card-image" alt="image caption">
 <md-card-content>
   <h2>Card headline</h2>
   <p>Card content</p>
 </md-card-content>
 <md-card-actions layout="row" layout-align="end center">
   <md-button>Action 1</md-button>
   <md-button>Action 2</md-button>
 </md-card-actions>
</md-card>
</hljs>

<h3 id="card-with-header-image-title-actions-and-content">Card with header, image, title actions and content</h3>
<hljs lang="html">
<md-card>
  <md-card-header>
    <md-card-avatar>
      <img class="md-user-avatar" src="avatar.png"/>
    </md-card-avatar>
    <md-card-header-text>
      <span class="md-title">Title</span>
      <span class="md-subhead">Sub header</span>
    </md-card-header-text>
  </md-card-header>
  <img ng-src="card-image.png" class="md-card-image" alt="image caption">
  <md-card-title>
    <md-card-title-text>
      <span class="md-headline">Card headline</span>
      <span class="md-subhead">Card subheader</span>
    </md-card-title-text>
  </md-card-title>
  <md-card-actions layout="row" layout-align="start center">
    <md-button>Action 1</md-button>
    <md-button>Action 2</md-button>
    <md-card-icon-actions>
      <md-button class="md-icon-button" aria-label="icon">
        <md-icon md-svg-icon="icon"></md-icon>
      </md-button>
    </md-card-icon-actions>
  </md-card-actions>
  <md-card-content>
    <p>
     Card content
    </p>
  </md-card-content>
</md-card>
</hljs>
  
  </section>
  
  


  
</div>


</div>
